---
title: Grid
---

# Grid

CSS grid layout component to arrange direct child elements in a tiled grid layout.

```sh
import { Grid } from 'theme-ui'
```

```jsx live=true
<Grid width={[128, null, 192]}>
  <Box bg="primary">Box</Box>
  <Box bg="muted">Box</Box>
  <Box bg="primary">Box</Box>
  <Box bg="muted">Box</Box>
</Grid>
```

```jsx live=true
<Grid gap={2} columns={[2, null, 4]}>
  <Box bg="primary">Box</Box>
  <Box bg="muted">Box</Box>
  <Box bg="primary">Box</Box>
  <Box bg="muted">Box</Box>
</Grid>
```

```jsx live=true
<Grid gap={2} columns={[2, '1fr 2fr']}>
  <Box bg="primary">Box</Box>
  <Box bg="muted">Box</Box>
  <Box bg="primary">Box</Box>
  <Box bg="muted">Box</Box>
</Grid>
```

## Props

The `Grid` component includes custom props for adjusting the grid layout.
Each prop can use the [responsive array][] syntax for mobile-first responsive styles.

| Prop      | Description                                                                                                                                                                                                  |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `width`   | Minimum width of child elements                                                                                                                                                                              |
| `gap`     | Space between child elements                                                                                                                                                                                 |
| `columns` | Number of (equally-sized) columns, or string with [grid syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) for the layout (cannot be used in conjunction with the `width` prop) |
| `repeat`  | Mode for column sizing, used in conjunction with the `width` prop. Can either be `fit` or `fill` (`fit` is default)                                                                                          |

[responsive array]: /sx-prop#responsive-values

## Variants

You can define additional CSS grid layouts by adding variants to the `theme.grids` object.
These styles can be used to create a wide variety of different reusable layouts.
